<div class="row">
  <div class="col-md-12">
    
<!--主功能部份 主功能部份的标签请勿随意删除，除非你对shearphoto的原理了如指掌，否则JS找不到DOM对象，会给你抱出错误-->
  <div id="shearphoto_loading">程序加载中......</div>
  <!--这是2.2版本加入的缓冲效果，JS方法加载前显示的等待效果-->
  <div id="shearphoto_main">
    <!--效果开始.............如果你不要特效，可以直接删了........-->
    <div class="Effects" id="shearphoto_Effects" autocomplete="off">
      <strong class="EffectsStrong">截图效果</strong>
      <a href="javascript:;" StrEvent="原图" class="Aclick"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e0.jpg" />原图</a>
      <a href="javascript:;" StrEvent="美肤"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e1.jpg" />美肤效果</a>
      <a href="javascript:;" StrEvent="素描"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e2.jpg" />素描效果</a>
      <a href="javascript:;" StrEvent="自然增强"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e3.jpg" />自然增强</a>
      <a href="javascript:;" StrEvent="紫调"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e4.jpg" />紫调效果</a>
      <a href="javascript:;" StrEvent="柔焦"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e5.jpg" />柔焦效果</a>
      <a href="javascript:;" StrEvent="复古"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e6.jpg" />复古效果</a>
      <a href="javascript:;" StrEvent="黑白"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e7.jpg" />黑白效果</a>
      <a href="javascript:;" StrEvent="仿lomo"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e8.jpg" />仿lomo</a>
      <a href="javascript:;" StrEvent="亮白增强"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e9.jpg" />亮白增强</a>
      <a href="javascript:;" StrEvent="灰白"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e10.jpg" />灰白效果</a>
      <a href="javascript:;" StrEvent="灰色"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e11.jpg" />灰色效果</a>
      <a href="javascript:;" StrEvent="暖秋"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e12.jpg" />暖秋效果</a>
      <a href="javascript:;" StrEvent="木雕"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e13.jpg" />木雕效果</a>
      <a href="javascript:;" StrEvent="粗糙"><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/Effects/e14.jpg" />粗糙效果</a>
    </div>
    <!--效果结束...........................如果你不要特效，可以直接删了.....................................................-->
    <!--primary范围开始-->
    <div class="primary">
      <!--main范围开始-->
      <div id="main">
        <div class="point">
        </div>
        <!--选择加载图片方式开始-->
        <div id="SelectBox">
          <form id="ShearPhotoForm" enctype="multipart/form-data" method="post" target="POSTiframe">
            <input name="shearphoto" type="hidden" value="我要传参数" autocomplete="off">
            <!--示例传参数到服务端，后端文件UPLOAD.php用$_POST['shearphoto']接收,注意：HTML5切图时，这个参数是不会传的-->
            <a href="javascript:;" id="selectImage" style="top:45%;">
              <input type="file" name="UpFile" autocomplete="off" />
            </a>
          </form>
        </div>
        <!--选择加载图片方式结束--->
        <div id="relat">
          <div id="black">
          </div>
          <div id="movebox">
            <div id="smallbox">
              <img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/default.gif" class="MoveImg" />
              <!--截框上的小图-->
            </div>
            <!--动态边框开始-->
            <i id="borderTop">
                              </i>

            <i id="borderLeft">
                              </i>

            <i id="borderRight">
                              </i>

            <i id="borderBottom">
                              </i>
            <!--动态边框结束-->
            <i id="BottomRight">
                              </i>
            <i id="TopRight">
                              </i>
            <i id="Bottomleft">
                              </i>
            <i id="Topleft">
                              </i>
            <i id="Topmiddle">
                              </i>
            <i id="leftmiddle">
                              </i>
            <i id="Rightmiddle">
                              </i>
            <i id="Bottommiddle">
                              </i>
          </div>
          <img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/images/default.gif" class="BigImg" />
          <!--MAIN上的大图-->
        </div>
      </div>
      <!--main范围结束-->
      <div style="clear: both"></div>
      <!--工具条开始-->
      <div id="Shearbar">
        <a id="LeftRotate" href="javascript:;">
          <em></em> 向左旋转
        </a>
        <em class="hint L"></em>
        <div class="ZoomDist" id="ZoomDist">
          <div id="Zoomcentre">
          </div>
          <div id="ZoomBar">
          </div>
          <span class="progress">
          </span>
        </div>
        <em class="hint R">
        </em>
        <a id="RightRotate" href="javascript:;">
          向右旋转<em></em>
        </a>
        <p class="Psava">
          <a id="againIMG" href="javascript:;">重新选择</a>
          <a id="saveShear" href="javascript:;">保存截图</a>
        </p>
      </div>
      <!--工具条结束-->
    </div>
    <!--primary范围结束-->
    <div style="clear: both"></div>
  </div>
  <!--shearphoto_main范围结束-->

  <!--主功能部份 主功能部份的标签请勿随意删除，除非你对shearphoto的原理了如指掌，否则JS找不到DOM对象，会给你抱出错误-->
  <!--相册-->
  <div id="photoalbum">
    <!--假如你不要这个相册功能。把相册标签删除了，JS会抱出一个console.log()给你，注意查收，console.log的内容是告诉，某个DOM对象找不到-->
    <h1>假如：这是一个相册--------试试点击图片</h1>
    <i id="close"></i>
    <ul>
      <li><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/file/photo/1.jpg" serveUrl="file/photo/1.jpg" /></li>
      <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
      <li><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/file/photo/2.jpg" serveUrl="file/photo/2.jpg" /></li>
      <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
      <li><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/file/photo/3.jpg" serveUrl="file/photo/3.jpg" /></li>
      <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
      <li><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/file/photo/4.jpg" serveUrl="file/photo/4.jpg" /></li>
      <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
      <li><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/file/photo/5.jpg" serveUrl="file/photo/5.jpg" /></li>
      <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
      <li><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/file/photo/6.jpg" serveUrl="file/photo/6.jpg" /></li>
      <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
      <li><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/file/photo/7.jpg" serveUrl="file/photo/7.jpg" /></li>
      <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
      <li><img src="{$site_root}/static/plugins/shearphoto/shearphoto_common/file/photo/8.jpg" serveUrl="file/photo/8.jpg" /></li>
      <!--serveUrl 是对于服务器路径而言，一般不需要改动，如果index.html位置改变时，你只需要改动 src就可以-->
    </ul>
  </div>
  <!--相册-->
  <!--拍照-->
  <div id="CamBox">
    <!--假如你不要这个拍照功能。把拍照标签删除了，JS会抱出一个console.log()给你，注意查收，console.log的内容是告诉，某个DOM对象找不到-->
    <p class="lens"></p>
    <div id="CamFlash"></div>
    <p class="cambar">
      <a href="javascript:;" id="CamOk">拍照</a>
      <a href="javascript:;" id="setCam">设置</a>
      <a href="javascript:;" id="camClose">关闭</a>
      <span style="clear:both;"></span>
    </p>
    <div id="timing"></div>
  </div>
  </div>
</div>